<template>
	<div class="factory-video-list table-theme">
		<head-title title="合作--工厂视频"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left"><el-button type="danger" @click="batchDel">批量删除</el-button></div>

				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					 <search-view
                            :option="searchOption"
                            @value="goSearch"
                            @clear="refreshPage"
							v-if="!factory_id"
                        ></search-view>
					<div class="add"><el-button type="primary" @click="showDialog(1)">添加视频</el-button></div>
				</div>
			</div>
			<p class="data-number">总视频数：{{ total }}</p>
			<el-table :data="fabricList" border class="factory-table"@selection-change="batchSelect">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column label="序号" align="center" prop="factory_id"></el-table-column>
				<el-table-column label="视频" align="center" width="80">
					<template slot-scope="scope">
						<el-popover placement="right" title="" trigger="hover">
							<video :src="scope.row.image" style="display: block; width: 500px;" controls="controls"/>
							<video slot="reference" :src="scope.row.image" style="width: 50px; height: 50px; vertical-align: top;" />
						</el-popover>
					</template>
				</el-table-column>
				<el-table-column label="排序" align="center" prop="">
					<template slot-scope="scope">
						<el-input
							v-model="scope.row.sort"
							placeholder=""
							onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))"
							@keyup.enter.native="postSort(scope.row.sort, scope.row.image_id)"
							@blur="postSort(scope.row.sort, scope.row.image_id)"
						></el-input>
					</template>
				</el-table-column>
				<el-table-column label="上下架" align="center">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.status" :active-value="0" :inactive-value="1" @change="upDown($event, scope.row.factory_id, scope.row.image_id)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="280">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="showDialog(2, scope.$index)">编辑</el-button>
						<el-button type="danger" size="mini" @click="del(scope.row.factory_id, scope.row.image_id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages"><el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination></div>
		</el-card>

		<!-- 弹框 -->
		<el-dialog :title="title" :visible.sync="addFabricDialog" width="500px" center :modal-append-to-body="false">
			<el-form :model="addFabricForm" :rules="addFabricFormRules" ref="addFabricForm" label-width="120px">
				<div class="user-info">
					<el-form-item label="视频:" class="upload-box" prop="image">
						<div class="headImg">
							<el-upload
								class="avatar-uploader"
								ref="upload"
								action="fakeaction"
								:show-file-list="false"
								:http-request="function(res) {return upload(res);}"
								accept="video/mp4,avi"
								:on-change="headImgChange">
								<video controls="controls" v-if="imageUrl" :src="imageUrl" class="avatar" />
								<i v-else class="el-icon-plus avatar-uploader-icon"></i>
							</el-upload>
						</div>
					</el-form-item>
					<div class="info-exhibition">
						<el-form-item label="排序:" prop="sort"><el-input v-model="addFabricForm.sort" placeholder="请输入排序" clearable></el-input></el-form-item>
						<el-form-item label="状态:" prop="status"><el-switch v-model="addFabricForm.status" :active-value="0" :inactive-value="1"></el-switch></el-form-item>
					</div>
				</div>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addFabricDialog = false">取 消</el-button>
				<el-button type="primary" @click="addFabricClick('addFabricForm')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name:"factory_video_list",
	data() {
		return {
			type: '',
			title: '',
			factory_id: localStorage.getItem('factory_id') == 'null' ? '':localStorage.getItem('factory_id'),
			imageUrl: '',
			addFabricForm: {
				sort: '',
				status: 0,
				image: '',
				is_factory:1
			}, // 添加视频的信息
			addFabricFormRules: {
				sort: [{ required: true, message: '请输入排序' }],
				image: [{ required: true, message: '请上传视频' }]
			},
			addFabricDialog: false, // 添加弹框
			fabricList: [], // 列表
			total: 0,
			totalData: 0, 
			page: 0,
			batchFactoryId: '',
			batchImageId: [],
			searchOption: [
                {
                value: 0,
                label: "工厂ID",
                }
            ],
			classSelect:"",
			selectContent:""
		};
	},
	methods: {
		// 初始化列表
		init(e) {
			this.page = e;
			let data = {
				page: e - 1 ? e - 1 : 0,
				limit: 10,
				factory_id: this.factory_id,
				type:1,
				order_by:'sort'
			};
			
			let id = this.$route.query.id
			if(id != undefined){
				data.factory_id = id
				this.factory_id = id
				delete this.addFabricForm.is_factory
			}
			if(this.classSelect == 0 && !id && !this.factory_id){
				data.factory_id = this.selectContent;
			}
			this.$http(this.$ApiList.FactoryImageList, data).then(res => {
				this.fabricList = res.datas.data;
				this.total = res.datas.count;
			});
		},
		// 删除
		del(factory_id, image_id) {
			this.$confirm('此操作将永久删除, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					//return;
					let data = {
						factory_id: factory_id,
						image_id: image_id
					};
					this.$http(this.$ApiList.FactoryImageDel, data).then(res => {
						if (res.code == 200) {
							this.$message({
								message: '删除成功',
								type: 'success'
							});
							this.init(this.page);
						}
					});
				})
				.catch(() => {});
		},
		// 批量选择
		batchSelect(e){
			if(e.length){
				e.forEach(item => {
					this.batchFactoryId = item.factory_id
					this.batchImageId.push(item.image_id)
				})
			}else{
				this.batchFactoryId = ''
				this.batchImageId = []
			}
		},
		// 批量删除
		batchDel(){
			if(!this.batchImageId.length){
				return this.$layer.msg('请选择需要删除的项')
			}
			this.$confirm('此操作将永久删除, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				let data = {
					factory_id: this.batchFactoryId,
					image_id: this.batchImageId.join(',')
				};
				this.$http(this.$ApiList.FactoryImageDel, data).then(res => {
					this.$message({
						message: '删除成功',
						type: 'success'
					});
					this.init(this.page);
				});
			}).catch(() => {});
		},
		// 控制Dialog显示
		showDialog(type, index) {
			this.type = type;
			this.addFabricDialog = true;
			if (type == 1) {
				this.title = '添加';
				this.imageUrl = '';
				this.addFabricForm = {
					sort: '',
					status: 0,
					image: ''
				};
			} else {
				this.title = '编辑';
				this.addFabricForm = this.fabricList[index];
				this.imageUrl = this.addFabricForm.image;
			}
		},
		// 上传
		upload(params) {
			//console.log(params);
			const file = params.file,
				fileType = file.type,
				isLt1MB = file.size / 1024 <= 100024;
			if (!isLt1MB) {
				this.$message.error('视频不能大于100M');
				return;
			}

			this.addFabricForm.image = new FormData();
			this.addFabricForm.image.append('file[]', file);
		},
		headImgChange(file, fileList) {
			var event = event || window.event;
			var file = event.target.files[0];
			var reader = new FileReader();
			//转base64
			reader.onload = e => {
				this.imageUrl = e.target.result; //将图片路径赋值给src
			};
			reader.readAsDataURL(file);
		},
		addFabricClick(formName) {
			this.addFabricForm.type = 1
			this.$refs[formName].validate(valid => {
				if (valid) {
					
					if (this.type == 1) {
						this.addFabricForm.factory_id = this.factory_id;
						this.$http(this.$ApiList.UpVideo, this.addFabricForm.image).then(res => {
								this.addFabricForm.image = res.datas;
								this.$http(this.$ApiList.UpFactoryImage, this.addFabricForm).then(res => {
									
										this.$layer.msg('提交成功');
										this.addFabricDialog = false;
										this.init();
									
								});
							
						});
					} else {
						let id = this.$route.query.id
						if(id == undefined){
							this.addFabricForm.is_factory = 1
						}
						delete this.addFabricForm.add_time;
						delete this.addFabricForm.update_time;
						delete this.addFabricForm.status_name;
						delete this.addFabricForm.type;
						if (this.imageUrl == this.addFabricForm.image) {
							this.$http(this.$ApiList.UpdateFactoryImage, this.addFabricForm).then(res => {
								
									this.$layer.msg('编辑成功');
									this.addFabricDialog = false;
									this.init();
								
							});
						} else {
							this.$http(this.$ApiList.UpVideo, this.addFabricForm.image).then(res => {
									this.addFabricForm.image = res.datas;
									this.$http(this.$ApiList.UpdateFactoryImage, this.addFabricForm).then(res => {
											this.$layer.msg('编辑成功');
											this.addFabricDialog = false;
											this.init();
									});
							});
						}
					}
				} else {
					this.$layer.msg('请填写完整信息后提交');
				}
			});
		},
		// 上下架
		upDown(e, factory_id, image_id) {
			let data = {
				factory_id: factory_id,
				image_id: image_id,
				status: e
			};
			this.$http(this.$ApiList.FactoryImageDown, data).then(res => {
				if (res.code == 200) {
					this.$layer.msg('操作成功');
				}
			});
		},
		handleEdit(index, row) {
			console.log(index, row);
		},
		refreshPage() {
			this.page = 1;
			this.classSelect = 0;
			this.selectContent = "";
			this.init()
		},
		postSort(sort, image_id) {
			if(sort < 0 || sort == ""){
				this.$layer.msg('请输入正确的排序');
				return
			}
			let data = {
				factory_id:this.factory_id,
				image_id:image_id,
				sort:sort
			}
		
			this.$http(this.$ApiList.FactoryImageSort, data).then(res => {
				this.init()
			});
		},
		goSearch(classSelect, selectContent) {
            this.classSelect = classSelect;
            this.selectContent = selectContent;
            this.init(1);
        },
	},
	created() {
		this.init();
	}
};
</script>
<style>
.user-info .el-avatar {
	display: block;
	margin: 0 auto;
}
.info-exhibition {
	margin-top: 20px;
}
.info-exhibition p {
	text-align: center;
	line-height: 30px;
	margin-bottom: 0;
}
.factory-video-list .avatar-uploader-icon, .factory-video-list .avatar{
	width: 300px;
	height: 200px;
	line-height: 200px;
}
</style>
